<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .countDown {
            width: fit-content;
            padding: 0 10px;
            line-height: 40px;
        }


        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
        }

        input[type='number'] {
            -moz-appearance: textfield;
        }
    </style>
</head>

<body>
    <div id="app">
        <p><input type="number" v-model.number="val"></p>
        <!-- <p><button>给朋友转账</button></p> -->

        <p>{{val}}</p>
        <p>{{handerMoney}}</p>

    </div>
</body>

<script>
    // V2:  组件名建议使用中划线命名法 (my-count-down)
    // V3:  组件名建议使用大驼峰式命名法 (MyCountDown)

    // 注意: 
    // 组件传参需要遵从单向数据流的原则, 父组件给子组件传递的数据 -> 子组件不能直接修改 

    // 如果子组件需要修改父组件传入的数据 => 变相改
    // 1. 把从父组件接收的数据作为 子组件某个属性的初始值



    var vm = new Vue({
        el: "#app",
        data:{
            val:"",
        },
        computed: {
            handerMoney(){
                // if(this.val){
                //     var intLen = this.val.toString().split(".")[0].length;   // 整数位的长度
                //     if(this.val % 1 == 0) { // 整数
                //         var str =  this.val.toString().split("").reverse().join("").replace(/(\d{3})/g,"$1,").split("").reverse().join("");
                //     }else{
                //         var str =  this.val.toFixed(2).toString().split("").reverse().join("").replace(/(\d{3})/g,"$1,").split("").reverse().join("");
                //     }
                //     console.log("intLen",intLen);
                //     return intLen % 3 == 0 ? str.substr(1):str;
                //     // return str;
                // }else{
                //     return "";
                // }

                // if(this.val){
                //     return this.val.toFixed(2).toString().split("").reverse().join("").replace(/(\d{3})/g,"$1,").replace(/\,$/,"").split("").reverse().join("")
                // }else{
                //     return "";
                // }

                return new Intl.NumberFormat().format(this.val)
            }
        },

    })



</script>

</html>